<template>
    <section>
        <!--列表-->
        <div class="panel panel-padd-40">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">匹配审核</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true">
                    <!-- <el-form-item>
                    <el-date-picker v-model="dataValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd' size='small'></el-date-picker>
                </el-form-item> -->
                    <el-form-item label="申请日期:">
                        <el-select v-model="verifyTimeType" size='small' placeholder="申请日期" style="width: 130px">
                            <el-option v-for="item in applicationData" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="银行:">
                        <el-select v-model="bankInfoId" size='small' placeholder="选择银行" style="width: 130px">
                            <el-option value="" label="全部银行"/>
                            <el-option v-for="item in banksData" :key="item.autoId" :label="item.bankName" :value="item.autoId"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="status" placeholder="请选择状态" size="small" style="width:130px;">
                            <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click='onSubmit'>搜索</el-button>
                    </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" size="small" @click='checkOrderFun'>通过</el-button>
                </el-form-item> -->
                </el-form>

                <!-- 数据列表 -->
                <el-table :data="tableData" border v-loading='listLoading' element-loading-text="拼命加载中" @selection-change="handleSelectionChange" ref="multipleTable">
                    <el-table-column prop="autoId" label="订单号"/>
                    <el-table-column prop="mobile" label="申请人"/>
                    <el-table-column prop="bankName" label="所属银行"/>
                    <el-table-column prop="cardName" label="申请卡片"/>
                    <el-table-column prop="verifyTime" label="审核时间"/>
                    <el-table-column prop="createTime" label="申请时间"/>
                    <el-table-column prop="verifyStatusDesc" label="审核状态"/>
                    <el-table-column label="审核" type="selection" width="55" :selectable="checkSelectable"/>
                </el-table>

                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-col :span="22">
                        <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" size="small" @click='checkOrderFun'>通过</el-button>
                    </el-col>
                </div>
            <!-- <div class="paginationMargin">
                <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange">
                </el-pagination>
            </div> -->
            </div>
        </div>
    </section>
</template>

<script>
import { bankNameList, forCheck, verify } from "../../api/api";
export default {
    data() {
        return {
            dataValue: [], // 开始结束时间数组
            startValue: "", // 开始时间
            endValue: "", // 结束时间

            verifyTimeType: -1, // 时间范围
            // 申请日期data
            applicationData: [
                {
                    value: -1,
                    label: "全部"
                },
                {
                    value: 1,
                    label: "今天"
                },
                {
                    value: 2,
                    label: "昨天"
                },
                {
                    value: 3,
                    label: "过去一周"
                },
                {
                    value: 4,
                    label: "过去一月"
                }
            ],

            bankInfoId: "",
            banksData: [], // 银行名称列表
            // 状态列表
            statusData: [
                {
                    value: -1,
                    label: "全部"
                },
                {
                    value: 0,
                    label: "未审核"
                },
                {
                    value: 1,
                    label: "审核通过"
                }
            ],
            status: -1, // 状态

            tableData: [],

            multipleSelection: [], //tableCheckbox

            listLoading: false,
            currentPage: 1, // 当前页数
            pageCount: 1 // 总条数
        };
    },
    methods: {
        // 查询
        onSubmit() {
            this.currentPage = 1; // 将页码置为第一页
            this.getForCheck();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getForCheck();
        },
        // 通过按钮
        checkOrderFun() {
            // this.multipleSelection.length
            if (!this.multipleSelection.length) {
                this.$message.error("请勾选列表!");
                return false;
            }
            this.$confirm("是否确认将勾选的数据通过?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    const oederIds = this.multipleSelection.join(",");
                    this.getCheckOrder(oederIds);
                })
                .catch(() => {
                    this.$refs.multipleTable.clearSelection();
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        // 获取银行名称列表
        getBankNameList() {
            bankNameList().then(res => {
                this.banksData = res.data;
            });
        },
        // 禁点的checkBox
        checkSelectable(row) {
            return row.verifyStatus === 0;
        },
        // 待审核订单列表
        getForCheck() {
            this.listLoading = true;
            forCheck({
                // pageSize: 2,
                bankInfoId: this.bankInfoId,
                verifyTimeType: this.verifyTimeType,
                verifyStatus: this.status,
                pageNum: this.currentPage
            }).then(res => {
                this.listLoading = false;
                this.tableData = res.data.list;
                this.pageCount = res.data.pages;
            });
        },
        // 更改订单状态
        getCheckOrder(orderIds) {
            verify({
                orderIds: orderIds,
                verifyStatus: 1
            }).then(() => {
                this.$message.success("操作成功!");
                this.getForCheck();
            });
        },
        // 表格checkBox选中
        handleSelectionChange(val) {
            const newArr = [];
            val.forEach(item => {
                newArr.push(item.autoId);
            });
            this.multipleSelection = newArr;
        }
    },
    mounted() {
        // 获取银行名称列表
        this.getBankNameList();

        this.getForCheck();
    }
};
</script>

<style scoped>
.panel-padd-40 {
    padding-bottom: 40px;
}
</style>
